<template>
	<view class="container">
		<view class="padding-sm bg-white">
			<view class="text-13 text-bold text-333">
				上传产品图片
			</view>
			<view class="cu-form-group padding-top">
				<view class="grid col-3 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index">
					 <image :src="baseUrl + item" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<3">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				商品名称
			</view>
			<input type="text" value="" class="text-13 flex-treble" placeholder="请填写商品名称"/>
		</view>
		<view class="solid-bottom text-13 flex justify-between align-center padding bg-white">
			<view class="text-333 text-bold">
				商品分类
			</view>
			<view class="flex justify-start align-center">
				<view class="text-767696 margin-right-xs">
					请选择
				</view>
				<image :src="baseUrl + '/static/images/right.png'" mode="" style="width: 22rpx;height: 22rpx;"></image>
			</view>
		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				商品价格
			</view>
			<view class="flex-treble text-13 flex justify-between align-center">
				<input type="text" value="" class="text-13 f-grow1" placeholder="请填写商品单价"/>
				<view class="color">
					元
				</view>
			</view>
			
		</view>
		<view class="margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				库存
			</view>
			<input type="text" value="" class="text-13 flex-treble" placeholder="请填写库存数"/>
		</view>
		<view class="margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				是否上架
			</view>
			<radio-group class="flex-treble flex justify-around align-center" @change="RadioChange">
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="radio=='A'?'bg-white':''" :checked="radio=='A'?true:false" value="A"></radio>
					<view class="title text-13 margin-left-xs">上架</view>
				</view>
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false" value="B"></radio>
					<view class="title text-13 margin-left-xs">下架</view>
				</view>
			</radio-group>
		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				是否安装
			</view>
			<radio-group class="flex-treble flex justify-around align-center" @change="RadioChange">
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="radio=='A'?'bg-white':''" :checked="radio=='A'?true:false" value="A"></radio>
					<view class="title text-13 margin-left-xs">是&nbsp;&nbsp;&nbsp;&nbsp;</view>
				</view>
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false" value="B"></radio>
					<view class="title text-13 margin-left-xs">否&nbsp;&nbsp;&nbsp;&nbsp;</view>
				</view>
			</radio-group>
		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				安装费
			</view>
			<view class="flex-treble text-13 flex justify-between align-center">
				<input type="text" value="" class="text-13 f-grow1" placeholder="请填写安装费"/>
				<view class="color">
					元
				</view>
			</view>
		</view>
		<view class="margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				配送费
			</view>
			<view class="flex-treble text-13 flex justify-between align-center">
				<input type="text" value="" class="text-13 f-grow1" placeholder="请填写配送费"/>
				<view class="color">
					元
				</view>
			</view>
		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				推荐爆品
			</view>
			<radio-group class="flex-treble flex justify-center align-center" @change="RadioChange">
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="radio=='A'?'bg-white':''" :checked="radio=='A'?true:false" value="A"></radio>
					<view class="title text-13 margin-left-xs">是</view>
				</view>
				<view class="flex justify-start align-center" style="margin-left: 120rpx;">
					<radio class="radio yellow" :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false" value="B"></radio>
					<view class="title text-13 margin-left-xs">否</view>
				</view>
			</radio-group>
		</view>
		<view class="solid-bottom text-13 flex justify-between align-center padding bg-white">
			<view class="text-333 text-bold">
				请选择爆品显示位置
			</view>
			<view class="flex justify-start align-center">
				<view class="text-767696 margin-right-xs">
					请选择
				</view>
				<image :src="baseUrl + '/static/images/right.png'" mode="" style="width: 22rpx;height: 22rpx;"></image>
			</view>
		</view>
		<view class="bg-white padding margin-top-sm">
			<view class="text-333">
				商品详情
			</view>
			<textarea value="" class="text-13 width-sub margin-top-sm" placeholder="在这里填写商品详情信息" />
		</view>
		<view class="padding bg-white margin-top-sm">
			<view class="text-13 text-bold text-333">
				上传商品详情图片
			</view>
			<view class="cu-form-group" style="margin-top: 48rpx;">
				<view class="grid col-3 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index">
					 <image :src="baseUrl + item" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<3">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</view>
		<button class="padding bg-color text-white margin radius10 text-15">确定</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl:this.$config.baseUrl,
				imgList: [],
				radio:''
			};
		},
		methods:{
			async ChooseImage() {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: (res) => {
							// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req=>{
								this.imgList.push(req.data.imgurl)
						})
						}
					});
				},
				DelImg(e) {
					uni.showModal({
						title: '提示',
						content: '确定要删除吗？',
						cancelText: '取消',
						confirmText: '确定',
						success: res => {
							if (res.confirm) {
								this.imgList.splice(e.currentTarget.dataset.index, 1)
							}
						}
					})
				},
			toPage(url){
				this.$util.openNewPage(url)
			},
			RadioChange(e) {
				this.radio = e.detail.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-form-group{
		margin-top: 74rpx;
		padding: 0;
	}
</style>
